<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-item text"> 场景名称: </span>
      <el-input v-model="name" disabled style="width:200px;" />
      <span class="filter-item text"> 条件: </span>
      <el-radio v-model="logic" disabled class="filter-item" label="and">同时满足</el-radio>
      <el-radio v-model="logic" disabled class="filter-item" label="or">任一满足</el-radio>
    </div>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h2>如果</h2>
          </div>

          <el-table :data="conditions" style="width: 100%">
            <el-table-column label="设备" align="center" prop="name" />
            <el-table-column label="位置" align="center" prop="position" />
            <el-table-column label="SN" align="center" prop="sn" />
            <el-table-column label="发生" align="center" prop="logic">
              <template slot-scope="{row}">
                <span v-if="row.tag==='infrared'">{{ row.status | infraredStatusFilter }}</span>
                <span v-if="row.tag==='door'">{{ row.status | doorStatusFilter }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h2>就执行</h2>
          </div>
          <el-table :data="runs" style="width: 100%">
            <el-table-column label="设备" align="center" prop="name" />
            <el-table-column label="位置" align="center" prop="position" />
            <el-table-column label="SN" align="center" prop="sn" />
            <el-table-column label="动作" align="center" prop="logic">
              <template slot-scope="{row}">
                <el-tag v-if="row.tag==='switch'">{{ row.status | switchStatusFilter }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { addAuto } from '@/api/auto'
import { getDevices } from '@/api/device'

export default {
  name: 'Auto',
  components: { },
  filters: {
    logicFilter(logic) {
      if (logic === 'and') {
        return '同时满足'
      }
      if (logic === 'or') {
        return '满足任一条件'
      }
    },
    logicTypeFilter(logic) {
      if (logic === 'and') {
        return 'success'
      }
      if (logic === 'or') {
        return 'warning'
      }
    },
    infraredStatusFilter(status) {
      if (status === 1) {
        return '有人'
      }
      if (status === 0) {
        return '无人'
      }
    },
    doorStatusFilter(status) {
      if (status === 1) {
        return '开启'
      }
      if (status === 0) {
        return '关闭'
      }
    },
    switchStatusFilter(status) {
      if (status === 1) {
        return '开启'
      }
      if (status === 0) {
        return '关闭'
      }
    }
  },
  data() {
    return {
      name: '',
      logic: 'and',
      formLabelWidth: '200px',
      conditions: [],
      runs: [],
      device: null,
      deviceListLoading: false,
      selectConditionDevices: [],
      selectRunDevices: [],
      dialogAddConditionVisible: false,
      dialogAddRunVisible: false
      // infraredStatus: [{ value: 1, label: '有人' }, { value: 0, label: '无人' }],
      // doorStatus: [{ value: 1, label: '开启' }, { value: 0, label: '关闭' }],
      // switchStatus: [{ value: 1, label: '开启' }, { value: 0, label: '关闭' }]
    }
  },
  created() {
    this.name = this.$route.query.name
    this.logic = this.$route.query.logic
    this.conditions = this.$route.query.condition
    this.runs = this.$route.query.run
    this.fetchDevices()
  },
  methods: {
    fetchDevices() {
      this.deviceListLoading = true
      getDevices().then(response => {
        this.deviceListLoading = false
        var data = response.data
        if (data === null) {
          this.selectConditionDevices = []
          this.selectRunDevices = []
        } else {
          for (var i = 0; i < data.length; i++) {
            data[i].status = 1
            if (data[i].tag === 'switch') {
              data[i].conditions = [{ select: false, value: 1, label: '开启' }, { select: false, value: 0, label: '关闭' }]
              this.selectRunDevices.push(data[i])
            }
            if (data[i].tag === 'door') {
              data[i].conditions = [{ select: false, value: 1, label: '开启' }, { select: false, value: 0, label: '关闭' }]
              this.selectConditionDevices.push(data[i])
            }
            if (data[i].tag === 'infrared') {
              data[i].conditions = [{ select: false, value: 1, label: '有人' }, { select: false, value: 0, label: '无人' }]
              this.selectConditionDevices.push(data[i])
            }
          }
        }
      })
    },
    // 提交保存
    handleSubmit() {
      if (this.name === null || this.name === '') {
        this.$message({ type: 'warning', message: '请输入场景名称' })
        return
      }
      if (this.conditions === null || this.conditions.length === 0) {
        this.$message({ type: 'warning', message: '请添加条件' })
        return
      }
      if (this.runs === null || this.runs.length === 0) {
        this.$message({ type: 'warning', message: '请添加动作' })
        return
      }
      var data = {
        name: this.name,
        logic: this.logic,
        run: this.runs,
        condition: this.conditions
      }
      console.log('添加')
      console.log(data)
      addAuto(data).then(response => {
        if (response.code === 200) {
          this.$message({ type: 'success', message: response.message })
          this.$router.push({ path: '/auto/index' })
        }
      })
    },

    handleAddCondition(row) {
      this.conditions.push({
        position: row.position,
        tag: row.tag,
        name: row.name,
        sn: row.sn,
        status: row.status
      })
      this.dialogAddConditionVisible = false
    },
    handleAddRun(row) {
      this.runs.push({
        position: row.position,
        tag: row.tag,
        name: row.name,
        sn: row.sn,
        status: row.status
      })
      this.dialogAddRunVisible = false
    },
    handleDeleteCondition(index) {
      this.conditions.splice(index, 1)
    },
    handleDeleteRun(index) {
      this.runs.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>

.text {
    font-size: 20px;
    color: black;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
}

.box-card{
  margin-bottom: 20px;
}

.plus{
  min-width: 100%;
  min-height: 300px;
  text-align: center;
  font-size: 108px;
}

 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
